<template>
  <el-dialog
    v-model="visible"
    title="作品征集申报"
    :close-on-click-modal="false"
    style="width: 55%;"
  >
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      :rules="dataRule"
      label-width="85px"
      @onclick="onSubmit()"
    >
      <h3>一、基本信息</h3>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item
            label="省"
            prop="province"
          >
            <el-switch
              v-model="dataForm.province"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="市"
            prop="city"
          >
            <el-switch
              v-model="dataForm.city"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="区"
            prop="area"
          >
            <el-switch
              v-model="dataForm.area"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item
            label="类别"
            prop="categoryType"
          >
            <el-switch
              v-model="dataForm.categoryType"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
          </el-form-item>
          <el-form-item v-if="dataForm.categoryType === 1">
            <el-tag
              v-for="tag in categoryParam.tags"
              :key="tag"
              closable
              :disable-transitions="false"
              @close="handleClose(categoryParam, tag)"
            >
              {{
                tag
              }}
            </el-tag>
            <el-input
              v-if="categoryParam.inputVisible"
              ref="categoryInput"
              v-model="categoryParam.inputValue"
              size="small"
              class="input-new-tag"
              @blur="handleInputConfirm(categoryParam)"
            />
            <el-button
              v-else
              size="small"
              class="button-new-tag"
              @click="categoryShowInput"
            >
              + New Tag
            </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="组别"
            prop="groupType"
          >
            <el-switch
              v-model="dataForm.groupType"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
          </el-form-item>
          <el-form-item v-if="dataForm.groupType === 1">
            <el-tag
              v-for="tag in groupParam.tags"
              :key="tag"
              closable
              :disable-transitions="false"
              @close="handleClose(groupParam, tag)"
            >
              {{
                tag
              }}
            </el-tag>
            <el-input
              v-if="groupParam.inputVisible"
              ref="groupInput"
              v-model="groupParam.inputValue"
              size="small"
              class="input-new-tag"
              @blur="handleInputConfirm(groupParam)"
            />
            <el-button
              v-else
              size="small"
              class="button-new-tag"
              @click="groupShowInput"
            >
              + New Tag
            </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="参赛对象"
            prop="entrants"
          >
            <el-switch
              v-model="dataForm.entrants"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="工作坊名称"
            prop="workshop"
          >
            <el-switch
              v-model="dataForm.workshop"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item
            label="姓名"
            prop="name"
          >
            <el-switch
              v-model="dataForm.name"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="身份证"
            prop="cardId"
          >
            <el-switch
              v-model="dataForm.cardId"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="手机号"
            prop="phone"
          >
            <el-switch
              v-model="dataForm.phone"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="电子邮箱"
            prop="email"
          >
            <el-switch
              v-model="dataForm.email"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <h3>二、报名材料</h3>
      <el-form-item
        label="报名表"
        prop="file"
      >
        <el-switch
          v-model="dataForm.file"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="0">
        </el-switch>
      </el-form-item>
      <el-form-item
        label="参赛视频"
        prop="video"
      >
        <el-switch
          v-model="dataForm.video"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="0">
        </el-switch>
      </el-form-item>
      <el-form-item
        label="作品照片"
        prop="image"
      >
        <el-switch
          v-model="dataForm.image"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="0">
        </el-switch>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="onSubmit()"
        >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {ElMessage} from 'element-plus'
import {Debounce} from '@/utils/debounce'

const emit = defineEmits(['refreshDataList'])
const visible = ref(false)
const dataForm = reactive({
  id: 0
})
const isSubmit = ref(false)
const dataFormRef = ref(null)
/**
 * 获取数据列表
 */
const init = (id) => {
  visible.value = true
  dataForm.id = id || 0
  nextTick(() => {
    dataFormRef.value?.resetFields()
  })
  if (dataForm.id) {
    // 修改
    http({
      url: http.adornUrl(`/admin/submissions/art/template/info/${dataForm.id}`),
      method: 'get',
      params: http.adornParams()
    })
      .then(({data}) => {
        visible.value = true
        dataForm.province = data.province
        dataForm.city = data.city
        dataForm.area = data.area
        categoryParam.tags = data.categoryTag ? JSON.parse(data.categoryTag) : []
        dataForm.categoryType = data.categoryType
        groupParam.tags = data.groupTag ? JSON.parse(data.groupTag) : []
        dataForm.groupType = data.groupType
        dataForm.entrants = data.entrants
        dataForm.workshop = data.workshop
        dataForm.name = data.name
        dataForm.cardId = data.cardId
        dataForm.phone = data.phone
        dataForm.email = data.email
        dataForm.file = data.file
        dataForm.video = data.video
        dataForm.image = data.image
      })
  } else {
    dataFormRef.value?.resetFields()
  }
}
defineExpose({init})

// 表单提交
const onSubmit = Debounce(() => {
  dataFormRef.value?.validate((valid) => {
    if (valid) {
      if (isSubmit.value) {
        return
      }
      isSubmit.value = true
      http({
        url: http.adornUrl('/admin/submissions/art/template/' + (dataForm.id ? 'update' : 'add')),
        method: 'post',
        data: http.adornData({
          id: dataForm.id || undefined,
          province: dataForm.province,
          city: dataForm.city,
          area: dataForm.area,
          categoryTag: JSON.stringify(categoryParam.tags),
          categoryType: dataForm.categoryType,
          groupTag: JSON.stringify(groupParam.tags),
          groupType: dataForm.groupType,
          entrants: dataForm.entrants,
          workshop: dataForm.workshop,
          name: dataForm.name,
          cardId: dataForm.cardId,
          phone: dataForm.phone,
          email: dataForm.email,
          file: dataForm.file,
          video: dataForm.video,
          image: dataForm.image
        })
      })
        .then(({data}) => {
          ElMessage({
            message: '操作成功',
            type: 'success',
            duration: 1000,
            onClose: () => {
              isSubmit.value = false
              visible.value = false
              emit('refreshDataList', data)
            }
          })
        })
    }
  })
})
// 类别
const categoryParam = reactive({
  tags: [],
  inputVisible: false,
  inputValue: ''
})
const categoryShowInput = () => {
  categoryParam.inputVisible = true
  this.$nextTick(() => {
    this.$refs.categoryInput.$refs.input.focus()
  })
}
const handleClose = (param, tag) => {
  param.tags.splice(param.tags.indexOf(tag), 1)
}
const handleInputConfirm = (param) => {
  const inputValue = param.inputValue
  if (inputValue) {
    param.tags.push(inputValue)
  }
  param.inputVisible = false
  param.inputValue = ''
}
// 类别
const groupParam = reactive({
  tags: [],
  inputVisible: false,
  inputValue: ''
})
const groupShowInput = () => {
  groupParam.inputVisible = true
  this.$nextTick(() => {
    this.$refs.groupInput.$refs.input.focus()
  })
}
</script>
